<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>井字棋</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    @charset "UTF-8";
    @import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
    @layer reset {
      *,
      *:before,
      *:after {
        box-sizing: border-box;
      }

      img {
        max-width: 100%;
      }
    }
    html {
      color-scheme: dark;
      background-color: canvas;
      background-color: light-dark(#fff, #1e1e1e);
      background-color: light-dark(#fff, #121312);
      padding: 1rem;
      font-family: system-ui;
      font-family: 'Poppins', sans-serif;
      font-size: 1rem;
    }
    html body {
      display: grid;
      gap: 1.5rem;
      color: light-dark(#333, #aaa);
      color: light-dark(#444, #999);
      max-width: min(40rem, 100%);
      width: fit-content;
      width: min(100%, 42ch);
      margin: auto;
      text-align: center;
      padding-block: 0.5rem 0.5rem;
    }

    body {
      overflow: auto;
      position: relative;
      display: grid;
      place-content: center;
      width: 10rem;
      margin: auto;
      gap: 1rem;
      min-height: 90dvh;
      text-align: center;
    }
    body > * {
      transition: all 0.3s var(--back-out);
    }

    h1 {
      --player-1-clr: light-dark(
              oklch(0.5 0.15 200 / 1),
              oklch(0.7 0.07 200 / 1)
      );
      --player-2-clr: light-dark(
              oklch(0.75 0.2 20 / 1),
              oklch(0.7 0.15 20 / 1)
      );
      --player-clr: var(--player-1-clr);
      font-family: inherit;
      text-align: center;
      margin-block: 0;
      padding-block: 0;
      opacity: 0.6;
      display: grid;
      gap: 0.2rem;
      position: relative;
      color: light-dark(#000, #ccc);
    }

    body:has(.player-2s-turn) h1 {
      --player-clr: var(--player-2-clr);
    }

    h1 small {
      font-size: 0.5em;
      font-weight: normal;
      color: #888888;
      color: light-dark(#555, #777);
    }

    .logo {
      font-size: 18rem;
      margin-block-end: -4.9rem;
      font-weight: normal;
      height: 6rem;
      opacity: 0.07;
      display: grid;
      place-content: center;
      user-select: none;
      z-index: -1;
    }

    kbd {
      font-size: 0.9em;
      font-weight: bold;
      border: solid 1px #88888880;
      padding-inline: 0.5ch;
      border-radius: 3px;
    }

    hr {
      width: 100%;
      opacity: 0.25;
    }

    h1 sup {
      color: light-dark(#333, #ccc);
      font-size: 1.2rem;
      font-weight: normal;
      display: inline-block;
      display: block;
      font-family: 'Georgia';
      position: absolute;
      right: -1ch;
      top: 0;
      user-select: none;
    }

    .description {
      text-align: left;
      line-height: 1.6;
      line-height: 1.75;
      margin: 0 0.25rem;
      padding: 0;
      padding-inline: 0.5rem;
      position: relative;
      display: block;
    }
    .description sup {
      font-family: 'Georgia';
      font-size: 1.5rem;
      position: absolute;
      top: 1.175ch;
      left: -0.5ch;
    }
    .description em {
      font-style: normal;
    }

    .adjective {
      color: var(--player-clr);
      font-family: sans-serif;
      font-family: 'Poppins', sans-serif;
      text-transform: uppercase;
      font-weight: normal;
      font-style: normal;
      font-size: 0.75em;
      font-size: 0.35em;
      line-height: 1;
      letter-spacing: 9.25px;
      letter-spacing: 13.76px;
      position: relative;
      transition: color 0.3s var(--back-out);
      width: fit-content;
      margin-inline: auto;
      padding-left: 0.75ch;
    }

    b,
    i {
      font-family: inherit;
      font-weight: bold;
      font-style: normal;
      transition: all 0.3s var(--back-out);
      display: inline-grid;
      place-content: center;
      line-height: 0.75em;
      width: 0.75rem;
      height: 0.75rem;
      position: relative;
      z-index: 1;
    }

    b {
      color: var(--player-1-clr);
      transform: scale(2) translatey(-0.2rem);
    }

    i {
      color: var(--player-2-clr);
    }

    .fade-out {
      opacity: 75%;
      filter: grayscale(75%);
    }

    button {
      cursor: pointer;
      color: inherit;
      color: light-dark(#000, #fff);
      color: ButtonText;
      background-color: light-dark(ButtonFace, #444);
      border: transparent;
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      translate: 0 3px;
      width: max-content;
      margin-inline: auto;
      min-width: 17ch;
      transition: opacity 0.6s var(--back-out), background-color 0.3s var(--back-out),
      translate 0.6s var(--back-out);
    }
    button:hover {
      background-color: #88888840;
    }
    button:focus-visible {
      outline: dashed 1px currentcolor;
      outline-offset: -3px;
    }
    button:active {
      filter: scale(0.9);
    }

    table.xo:not(:has(b)) + footer button {
      visibility: hidden;
      opacity: 0;
      translate: 0 -1rem;
      pointer-events: none;
    }

    table.xo:has(b) + footer button {
      visibility: unset;
      opacity: 1;
      translate: 0 0;
      pointer-events: unset;
    }

    body {
      --player-1-clr: light-dark(
              oklch(0.5 0.15 200 / 1),
              oklch(0.7 0.07 200 / 1)
      );
      --player-2-clr: light-dark(
              oklch(0.75 0.2 20 / 1),
              oklch(0.7 0.15 20 / 1)
      );
      --player-clr: var(--player-1-clr);
      --shadow-color: 220 40% 2%;
      --shadow-strength: 25%;
      --inner-shadow-highlight: inset 0 -0.5px 0 0 #fff1, inset 0 0.5px 0 0
      #0007;
      --shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(
      --shadow-strength
      ) + 2%)), 0 3px 2px -2px hsl(var(--shadow-color) / calc(var(
      --shadow-strength
      ) + 3%)),
      0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) +
              3%)), 0 12px 10px -2px hsl(var(--shadow-color) / calc(var(
              --shadow-strength
              ) + 4%)),
      0 22px 18px -2px hsl(var(--shadow-color) / calc(var(
              --shadow-strength
              ) + 5%)), 0 41px 33px -2px hsl(var(--shadow-color) / calc(var(
              --shadow-strength
              ) + 6%)),
      0 100px 80px -2px hsl(var(--shadow-color) / calc(var(
              --shadow-strength
              ) + 7%));
      --back-out: linear(
              0 0%,
              0.1935 4.37%,
              0.3671 8.83%,
              0.521 13.38%,
              0.6557 18.04%,
              0.7716 22.82%,
              0.869 27.73%,
              0.9488 32.81%,
              1.0111 38.08%,
              1.0512 42.81%,
              1.0792 47.75%,
              1.0953 52.97%,
              1.1 58.55%,
              1.0956 63.36%,
              1.0838 68.73%,
              1.0119 90.98%,
              1.0029 95.69%,
              1 100%
      );
    }
    body:has(.player-2s-turn) {
      --player-clr: var(--player-2-clr);
    }

    table.xo {
      --player-1-clr: light-dark(
              oklch(0.75 0.075 200 / 1),
              oklch(0.7 0.07 200 / 1)
      );
      --_block-size: 7rem;
      --_gap: 0.3rem;
      --_cursor-1: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="filter:invert(1);"><text x="0" y="20" font-family="sans-serif" font-size="2rem" fill="black" style="font-weight: bold; font-style: normal; line-height: .75em; width: .75rem; height: .75rem; display: block;">⨯</text></svg>');
      --_cursor-2: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="filter:invert(1);"><text x="0" y="20" font-family="sans-serif" font-size="1rem" fill="black" style="font-weight: bold; font-style: normal; line-height: .75em; width: .75rem; height: .75rem; display: block;">⭘</text></svg>');
      width: 100%;
      user-select: none;
      border-spacing: var(--_gap);
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      position: relative;
      margin-inline: auto;
      overflow: hidden;
      /* board bg */
      /* surfaces */
      /* edges */
      /* winner strokes */
    }
    table.xo:not(.player-2s-turn) {
      cursor: var(--_cursor-1) 4 16, auto;
    }
    table.xo.player-2s-turn {
      cursor: var(--_cursor-2) 4 16, auto;
    }
    table.xo:active td {
      transition: opacity 0.6s linear;
    }
    table.xo:not(:active):has(td:focus-visible) {
      cursor: default;
    }
    table.xo td:has(:is(b, i)) {
      cursor: default;
    }
    table.xo::before {
      content: '';
      background: #000;
      background: light-dark(#222, transparent);
      position: absolute;
      inset: 0;
      inset: var(--_gap) 0 0 0;
      pointer-events: none;
      z-index: -1;
      opacity: 1;
    }
    table.xo td {
      position: relative;
      background: #000;
      background: light-dark(#333, #000);
      padding: 1rem;
      border: solid 1px #88888899;
      border-radius: 2px;
      height: var(--_block-size);
      width: var(--_block-size);
      place-content: center;
      transition: border 0.6s var(--back-out);
    }
    @starting-style {
      table.xo td {
        border-color: transparent;
      }
    }
    table.xo td:not(:has(:is(b, i))):hover {
      background-attachment: fixed;
      background-image: radial-gradient(
              circle at var(--x, 0) var(--y, 0),
              rgba(255, 255, 255, 0.075),
              rgba(255, 255, 255, 0.025) 7.5rem
      );
    }
    table.xo td::after {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      background-attachment: fixed;
      background-color: #000;
      background-image: radial-gradient(
              circle at var(--x, 0) var(--y, 0),
              rgba(255, 255, 255, 0.995),
              transparent 5rem
      );
      pointer-events: none;
      z-index: -1;
    }
    table.xo td:has(:is(b, i))::after {
      background-image: radial-gradient(
              circle at var(--x, 0) var(--y, 0),
              rgba(255, 255, 255, 0.95),
              transparent 3rem
      );
    }
    table.xo::after {
      background: linear-gradient(
              to var(--_to),
              transparent calc(var(--_distance) - 1px),
              var(--_color) calc(var(--_distance) - 1px),
              var(--_color) calc(var(--_distance) + 1px),
              transparent calc(var(--_distance) + 1px)
      );
      display: block;
      pointer-events: none;
      display: none;
      content: '';
      position: absolute;
      inset: 0.5rem;
      inset: calc(var(--_gap) * 4);
      border-radius: 1rem;
      z-index: 1;
      opacity: 1;
    }
    table.xo td {
      outline-offset: -1.25rem;
    }
    table.xo td:focus-visible {
      outline: dashed 1px var(--player-1-clr);
    }
    table.xo.player-2s-turn td:focus-visible {
      outline: dashed 1px var(--player-2-clr);
    }
    table.xo td footer {
      position: absolute;
      bottom: var(--_gap);
      left: 50%;
      translate: -50% 0;
      display: flex;
    }

    button .new-game {
      display: none;
    }

    footer .win {
      display: none;
      line-height: 1;
    }

    *:has(> table.xo) .turn {
      --repeat: 1;
    }
    *:has(> table.xo) .turn > span {
      display: block;
      font-style: italic;
    }
    *:has(> table.xo) .turn > span > span {
      color: #888;
    }
    *:has(> table.xo) .turn .player-1 {
      color: var(--player-1-clr);
      display: block;
      line-height: 1;
    }
    *:has(> table.xo) .turn .player-2 {
      color: var(--player-2-clr);
      display: none;
      line-height: 1;
    }

    *:has(> table.xo.player-2s-turn) .turn {
      display: grid;
      place-content: center;
    }
    *:has(> table.xo.player-2s-turn) .turn .player-1 {
      display: none;
    }
    *:has(> table.xo.player-2s-turn) .turn .player-2 {
      display: block;
    }

    footer {
      --player-clr: var(--player-2-clr);
      display: grid;
      gap: 1rem;
    }

    .asterisk {
      color: var(--player-2-clr);
    }

    body:has(.player-2s-turn) :is(h1, footer) .asterisk {
      color: var(--player-1-clr);
    }

    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)) {
      pointer-events: none;
      margin-block-end: -0.125rem;
      /* horizontal 1 */
      /* horizontal 2 */
      /* horizontal 3 */
      /* vertical 1 */
      /* vertical 2 */
      /* vertical 3 */
      /* diagonal 1 */
      /* diagonal 2 */
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))
    + footer
    button
    .new-game {
      display: unset;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))
    + footer
    button
    .reset {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))
    + footer
    button:has(.new-game) {
      filter: invert(1);
      letter-spacing: 1px;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))
    + footer
    button:has(.new-game):hover {
      background-color: #aaa;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))
    ~ footer
    .player-1 {
      display: block;
      color: var(--player-2-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-1 {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-2 {
      display: block;
      color: var(--player-1-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))
    ~ footer
    .turn {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))
    ~ .pyro {
      display: block;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))
    ~ .ttt-winner {
      display: grid;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))::after {
      display: block !important;
      --_color: light-dark(
              oklch(0.5 0.15 200 / 1),
              oklch(0.7 0.07 200 / 0.75)
      );
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))::before {
      inset: var(--_gap) 0;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(1) td:nth-child(2) b):has(
          tr:nth-child(1) td:nth-child(3) b
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(2) td:nth-child(3) b
        )::after {
      --_distance: calc(50% - 1px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(1) b
        ):has(tr:nth-child(3) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(1) b):has(
          tr:nth-child(3) td:nth-child(1) b
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(2) b
        )::after {
      --_distance: 50%;
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) b
        ):has(tr:nth-child(2) td:nth-child(3) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: 50%;
      --_to: top right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(1) b
        )::after {
      --_distance: 50%;
      --_to: top left;
    }

    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)) {
      pointer-events: none;
      margin-block-end: -0.125rem;
      /* horizontal 1 */
      /* horizontal 2 */
      /* horizontal 3 */
      /* vertical 1 */
      /* vertical 2 */
      /* vertical 3 */
      /* diagonal 1 */
      /* diagonal 2 */
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))
    + footer
    button
    .new-game {
      display: unset;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))
    + footer
    button
    .reset {
      display: none;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))
    + footer
    button:has(.new-game) {
      filter: invert(1);
      letter-spacing: 1px;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))
    + footer
    button:has(.new-game):hover {
      background-color: #aaa;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))
    ~ footer
    .player-1 {
      display: block;
      color: var(--player-2-clr);
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-1 {
      display: none;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-2 {
      display: block;
      color: var(--player-1-clr);
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))
    ~ footer
    .turn {
      display: none;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))
    ~ .pyro {
      display: block;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))
    ~ .ttt-winner {
      display: grid;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))::after {
      display: block !important;
      --_color: light-dark(
              oklch(0.5 0.15 200 / 1),
              oklch(0.7 0.07 200 / 0.75)
      );
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))::before {
      inset: var(--_gap) 0;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(1) td:nth-child(2) b):has(
          tr:nth-child(1) td:nth-child(3) b
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(2) td:nth-child(3) b
        )::after {
      --_distance: calc(50% - 1px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(1) b
        ):has(tr:nth-child(3) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(1) b):has(
          tr:nth-child(3) td:nth-child(1) b
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(2) b
        )::after {
      --_distance: 50%;
      --_to: right;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) b
        ):has(tr:nth-child(2) td:nth-child(3) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: 50%;
      --_to: top right;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(1) b
        )::after {
      --_distance: 50%;
      --_to: top left;
    }

    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)) {
      pointer-events: none;
      margin-block-end: -0.125rem;
      /* horizontal 1 */
      /* horizontal 2 */
      /* horizontal 3 */
      /* vertical 1 */
      /* vertical 2 */
      /* vertical 3 */
      /* diagonal 1 */
      /* diagonal 2 */
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    + footer
    button
    .new-game {
      display: unset;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    + footer
    button
    .reset {
      display: none;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    + footer
    button:has(.new-game) {
      filter: invert(1);
      letter-spacing: 1px;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    + footer
    button:has(.new-game):hover {
      background-color: #aaa;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    ~ footer
    .player-1 {
      display: block;
      color: var(--player-2-clr);
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-1 {
      display: none;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-2 {
      display: block;
      color: var(--player-1-clr);
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    ~ footer
    .turn {
      display: none;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    ~ .pyro {
      display: block;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    ~ .ttt-winner {
      display: grid;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))::after {
      display: block !important;
      --_color: light-dark(
              oklch(0.5 0.15 200 / 1),
              oklch(0.7 0.07 200 / 0.75)
      );
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))::before {
      inset: var(--_gap) 0;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(1) td:nth-child(2) b):has(
          tr:nth-child(1) td:nth-child(3) b
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(2) td:nth-child(3) b
        )::after {
      --_distance: calc(50% - 1px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(1) b
        ):has(tr:nth-child(3) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(1) b):has(
          tr:nth-child(3) td:nth-child(1) b
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(2) b
        )::after {
      --_distance: 50%;
      --_to: right;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) b
        ):has(tr:nth-child(2) td:nth-child(3) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: 50%;
      --_to: top right;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(1) b
        )::after {
      --_distance: 50%;
      --_to: top left;
    }

    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)) {
      pointer-events: none;
      margin-block-end: -0.125rem;
      /* horizontal 1 */
      /* horizontal 2 */
      /* horizontal 3 */
      /* vertical 1 */
      /* vertical 2 */
      /* vertical 3 */
      /* diagonal 1 */
      /* diagonal 2 */
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
    + footer
    button
    .new-game {
      display: unset;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
    + footer
    button
    .reset {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
    + footer
    button:has(.new-game) {
      filter: invert(1);
      letter-spacing: 1px;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
    + footer
    button:has(.new-game):hover {
      background-color: #aaa;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
    ~ footer
    .player-1 {
      display: block;
      color: var(--player-2-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-1 {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-2 {
      display: block;
      color: var(--player-1-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
    ~ footer
    .turn {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
    ~ .pyro {
      display: block;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
    ~ .ttt-winner {
      display: grid;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))::after {
      display: block !important;
      --_color: light-dark(
              oklch(0.5 0.15 200 / 1),
              oklch(0.7 0.07 200 / 0.75)
      );
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))::before {
      inset: var(--_gap) 0;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(1) td:nth-child(2) b):has(
          tr:nth-child(1) td:nth-child(3) b
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(2) td:nth-child(3) b
        )::after {
      --_distance: calc(50% - 1px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(1) b
        ):has(tr:nth-child(3) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(1) b):has(
          tr:nth-child(3) td:nth-child(1) b
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(2) b
        )::after {
      --_distance: 50%;
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) b
        ):has(tr:nth-child(2) td:nth-child(3) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: 50%;
      --_to: top right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(1) b
        )::after {
      --_distance: 50%;
      --_to: top left;
    }

    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)) {
      pointer-events: none;
      margin-block-end: -0.125rem;
      /* horizontal 1 */
      /* horizontal 2 */
      /* horizontal 3 */
      /* vertical 1 */
      /* vertical 2 */
      /* vertical 3 */
      /* diagonal 1 */
      /* diagonal 2 */
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))
    + footer
    button
    .new-game {
      display: unset;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))
    + footer
    button
    .reset {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))
    + footer
    button:has(.new-game) {
      filter: invert(1);
      letter-spacing: 1px;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))
    + footer
    button:has(.new-game):hover {
      background-color: #aaa;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))
    ~ footer
    .player-1 {
      display: block;
      color: var(--player-2-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-1 {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-2 {
      display: block;
      color: var(--player-1-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))
    ~ footer
    .turn {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))
    ~ .pyro {
      display: block;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))
    ~ .ttt-winner {
      display: grid;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))::after {
      display: block !important;
      --_color: light-dark(
              oklch(0.5 0.15 200 / 1),
              oklch(0.7 0.07 200 / 0.75)
      );
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))::before {
      inset: var(--_gap) 0;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(1) td:nth-child(2) b):has(
          tr:nth-child(1) td:nth-child(3) b
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(2) td:nth-child(3) b
        )::after {
      --_distance: calc(50% - 1px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(1) b
        ):has(tr:nth-child(3) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(1) b):has(
          tr:nth-child(3) td:nth-child(1) b
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(2) b
        )::after {
      --_distance: 50%;
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) b
        ):has(tr:nth-child(2) td:nth-child(3) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: 50%;
      --_to: top right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(1) b
        )::after {
      --_distance: 50%;
      --_to: top left;
    }

    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)) {
      pointer-events: none;
      margin-block-end: -0.125rem;
      /* horizontal 1 */
      /* horizontal 2 */
      /* horizontal 3 */
      /* vertical 1 */
      /* vertical 2 */
      /* vertical 3 */
      /* diagonal 1 */
      /* diagonal 2 */
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    + footer
    button
    .new-game {
      display: unset;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    + footer
    button
    .reset {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    + footer
    button:has(.new-game) {
      filter: invert(1);
      letter-spacing: 1px;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    + footer
    button:has(.new-game):hover {
      background-color: #aaa;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    ~ footer
    .player-1 {
      display: block;
      color: var(--player-2-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-1 {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-2 {
      display: block;
      color: var(--player-1-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    ~ footer
    .turn {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    ~ .pyro {
      display: block;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    ~ .ttt-winner {
      display: grid;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))::after {
      display: block !important;
      --_color: light-dark(
              oklch(0.5 0.15 200 / 1),
              oklch(0.7 0.07 200 / 0.75)
      );
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))::before {
      inset: var(--_gap) 0;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(1) td:nth-child(2) b):has(
          tr:nth-child(1) td:nth-child(3) b
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(2) td:nth-child(3) b
        )::after {
      --_distance: calc(50% - 1px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(1) b
        ):has(tr:nth-child(3) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(1) b):has(
          tr:nth-child(3) td:nth-child(1) b
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(2) b
        )::after {
      --_distance: 50%;
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) b
        ):has(tr:nth-child(2) td:nth-child(3) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: 50%;
      --_to: top right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(1) b
        )::after {
      --_distance: 50%;
      --_to: top left;
    }

    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)) {
      pointer-events: none;
      margin-block-end: -0.125rem;
      /* horizontal 1 */
      /* horizontal 2 */
      /* horizontal 3 */
      /* vertical 1 */
      /* vertical 2 */
      /* vertical 3 */
      /* diagonal 1 */
      /* diagonal 2 */
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    + footer
    button
    .new-game {
      display: unset;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    + footer
    button
    .reset {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    + footer
    button:has(.new-game) {
      filter: invert(1);
      letter-spacing: 1px;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    + footer
    button:has(.new-game):hover {
      background-color: #aaa;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    ~ footer
    .player-1 {
      display: block;
      color: var(--player-2-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-1 {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-2 {
      display: block;
      color: var(--player-1-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    ~ footer
    .turn {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    ~ .pyro {
      display: block;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
    ~ .ttt-winner {
      display: grid;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))::after {
      display: block !important;
      --_color: light-dark(
              oklch(0.5 0.15 200 / 1),
              oklch(0.7 0.07 200 / 0.75)
      );
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))::before {
      inset: var(--_gap) 0;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(1) td:nth-child(2) b):has(
          tr:nth-child(1) td:nth-child(3) b
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(2) td:nth-child(3) b
        )::after {
      --_distance: calc(50% - 1px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(1) b
        ):has(tr:nth-child(3) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(1) b):has(
          tr:nth-child(3) td:nth-child(1) b
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(2) b
        )::after {
      --_distance: 50%;
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) b
        ):has(tr:nth-child(2) td:nth-child(3) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: 50%;
      --_to: top right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(1) b
        )::after {
      --_distance: 50%;
      --_to: top left;
    }

    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)) {
      pointer-events: none;
      margin-block-end: -0.125rem;
      /* horizontal 1 */
      /* horizontal 2 */
      /* horizontal 3 */
      /* vertical 1 */
      /* vertical 2 */
      /* vertical 3 */
      /* diagonal 1 */
      /* diagonal 2 */
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
    + footer
    button
    .new-game {
      display: unset;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
    + footer
    button
    .reset {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
    + footer
    button:has(.new-game) {
      filter: invert(1);
      letter-spacing: 1px;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
    + footer
    button:has(.new-game):hover {
      background-color: #aaa;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
    ~ footer
    .player-1 {
      display: block;
      color: var(--player-2-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-1 {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-2 {
      display: block;
      color: var(--player-1-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
    ~ footer
    .turn {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
    ~ .pyro {
      display: block;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
    ~ .ttt-winner {
      display: grid;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))::after {
      display: block !important;
      --_color: light-dark(
              oklch(0.5 0.15 200 / 1),
              oklch(0.7 0.07 200 / 0.75)
      );
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))::before {
      inset: var(--_gap) 0;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(1) td:nth-child(2) b):has(
          tr:nth-child(1) td:nth-child(3) b
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(2) td:nth-child(3) b
        )::after {
      --_distance: calc(50% - 1px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(1) b
        ):has(tr:nth-child(3) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(1) b):has(
          tr:nth-child(3) td:nth-child(1) b
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(2) b
        )::after {
      --_distance: 50%;
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) b
        ):has(tr:nth-child(2) td:nth-child(3) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(3) b
        )::after {
      --_distance: 50%;
      --_to: top right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) b
        ):has(tr:nth-child(2) td:nth-child(2) b):has(
          tr:nth-child(3) td:nth-child(1) b
        )::after {
      --_distance: 50%;
      --_to: top left;
    }

    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)) {
      pointer-events: none;
      margin-block-end: -0.125rem;
      /* horizontal 1 */
      /* horizontal 2 */
      /* horizontal 3 */
      /* vertical 1 */
      /* vertical 2 */
      /* vertical 3 */
      /* diagonal 1 */
      /* diagonal 2 */
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))
    + footer
    button
    .new-game {
      display: unset;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))
    + footer
    button
    .reset {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))
    + footer
    button:has(.new-game) {
      filter: invert(1);
      letter-spacing: 1px;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))
    + footer
    button:has(.new-game):hover {
      background-color: #aaa;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))
    ~ footer
    .player-1 {
      display: block;
      color: var(--player-2-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-1 {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-2 {
      display: block;
      color: var(--player-1-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))
    ~ footer
    .turn {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))
    ~ .pyro {
      display: block;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))
    ~ .ttt-winner {
      display: grid;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))::after {
      display: block !important;
      --_color: light-dark(oklch(0.75 0.2 20 / 1), oklch(0.7 0.15 20 / 0.75));
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))::before {
      inset: var(--_gap) 0;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(1) td:nth-child(2) i):has(
          tr:nth-child(1) td:nth-child(3) i
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(2) td:nth-child(3) i
        )::after {
      --_distance: calc(50% - 1px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(1) i
        ):has(tr:nth-child(3) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(1) i):has(
          tr:nth-child(3) td:nth-child(1) i
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(2) i
        )::after {
      --_distance: 50%;
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) i
        ):has(tr:nth-child(2) td:nth-child(3) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: 50%;
      --_to: top right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(1) i
        )::after {
      --_distance: 50%;
      --_to: top left;
    }

    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)) {
      pointer-events: none;
      margin-block-end: -0.125rem;
      /* horizontal 1 */
      /* horizontal 2 */
      /* horizontal 3 */
      /* vertical 1 */
      /* vertical 2 */
      /* vertical 3 */
      /* diagonal 1 */
      /* diagonal 2 */
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))
    + footer
    button
    .new-game {
      display: unset;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))
    + footer
    button
    .reset {
      display: none;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))
    + footer
    button:has(.new-game) {
      filter: invert(1);
      letter-spacing: 1px;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))
    + footer
    button:has(.new-game):hover {
      background-color: #aaa;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))
    ~ footer
    .player-1 {
      display: block;
      color: var(--player-2-clr);
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-1 {
      display: none;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-2 {
      display: block;
      color: var(--player-1-clr);
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))
    ~ footer
    .turn {
      display: none;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))
    ~ .pyro {
      display: block;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))
    ~ .ttt-winner {
      display: grid;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))::after {
      display: block !important;
      --_color: light-dark(oklch(0.75 0.2 20 / 1), oklch(0.7 0.15 20 / 0.75));
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))::before {
      inset: var(--_gap) 0;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(1) td:nth-child(2) i):has(
          tr:nth-child(1) td:nth-child(3) i
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(2) td:nth-child(3) i
        )::after {
      --_distance: calc(50% - 1px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(1) i
        ):has(tr:nth-child(3) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(1) i):has(
          tr:nth-child(3) td:nth-child(1) i
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(2) i
        )::after {
      --_distance: 50%;
      --_to: right;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) i
        ):has(tr:nth-child(2) td:nth-child(3) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: 50%;
      --_to: top right;
    }
    table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(1) i
        )::after {
      --_distance: 50%;
      --_to: top left;
    }

    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)) {
      pointer-events: none;
      margin-block-end: -0.125rem;
      /* horizontal 1 */
      /* horizontal 2 */
      /* horizontal 3 */
      /* vertical 1 */
      /* vertical 2 */
      /* vertical 3 */
      /* diagonal 1 */
      /* diagonal 2 */
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    + footer
    button
    .new-game {
      display: unset;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    + footer
    button
    .reset {
      display: none;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    + footer
    button:has(.new-game) {
      filter: invert(1);
      letter-spacing: 1px;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    + footer
    button:has(.new-game):hover {
      background-color: #aaa;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    ~ footer
    .player-1 {
      display: block;
      color: var(--player-2-clr);
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-1 {
      display: none;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-2 {
      display: block;
      color: var(--player-1-clr);
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    ~ footer
    .turn {
      display: none;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    ~ .pyro {
      display: block;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    ~ .ttt-winner {
      display: grid;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))::after {
      display: block !important;
      --_color: light-dark(oklch(0.75 0.2 20 / 1), oklch(0.7 0.15 20 / 0.75));
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))::before {
      inset: var(--_gap) 0;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(1) td:nth-child(2) i):has(
          tr:nth-child(1) td:nth-child(3) i
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(2) td:nth-child(3) i
        )::after {
      --_distance: calc(50% - 1px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(1) i
        ):has(tr:nth-child(3) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(1) i):has(
          tr:nth-child(3) td:nth-child(1) i
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(2) i
        )::after {
      --_distance: 50%;
      --_to: right;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) i
        ):has(tr:nth-child(2) td:nth-child(3) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: 50%;
      --_to: top right;
    }
    table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(1) i
        )::after {
      --_distance: 50%;
      --_to: top left;
    }

    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)) {
      pointer-events: none;
      margin-block-end: -0.125rem;
      /* horizontal 1 */
      /* horizontal 2 */
      /* horizontal 3 */
      /* vertical 1 */
      /* vertical 2 */
      /* vertical 3 */
      /* diagonal 1 */
      /* diagonal 2 */
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
    + footer
    button
    .new-game {
      display: unset;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
    + footer
    button
    .reset {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
    + footer
    button:has(.new-game) {
      filter: invert(1);
      letter-spacing: 1px;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
    + footer
    button:has(.new-game):hover {
      background-color: #aaa;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
    ~ footer
    .player-1 {
      display: block;
      color: var(--player-2-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-1 {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-2 {
      display: block;
      color: var(--player-1-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
    ~ footer
    .turn {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
    ~ .pyro {
      display: block;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
    ~ .ttt-winner {
      display: grid;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))::after {
      display: block !important;
      --_color: light-dark(oklch(0.75 0.2 20 / 1), oklch(0.7 0.15 20 / 0.75));
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))::before {
      inset: var(--_gap) 0;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(1) td:nth-child(2) i):has(
          tr:nth-child(1) td:nth-child(3) i
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(2) td:nth-child(3) i
        )::after {
      --_distance: calc(50% - 1px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(1) i
        ):has(tr:nth-child(3) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(1) i):has(
          tr:nth-child(3) td:nth-child(1) i
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(2) i
        )::after {
      --_distance: 50%;
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) i
        ):has(tr:nth-child(2) td:nth-child(3) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: 50%;
      --_to: top right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(1) i
        )::after {
      --_distance: 50%;
      --_to: top left;
    }

    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)) {
      pointer-events: none;
      margin-block-end: -0.125rem;
      /* horizontal 1 */
      /* horizontal 2 */
      /* horizontal 3 */
      /* vertical 1 */
      /* vertical 2 */
      /* vertical 3 */
      /* diagonal 1 */
      /* diagonal 2 */
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))
    + footer
    button
    .new-game {
      display: unset;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))
    + footer
    button
    .reset {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))
    + footer
    button:has(.new-game) {
      filter: invert(1);
      letter-spacing: 1px;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))
    + footer
    button:has(.new-game):hover {
      background-color: #aaa;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))
    ~ footer
    .player-1 {
      display: block;
      color: var(--player-2-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-1 {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-2 {
      display: block;
      color: var(--player-1-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))
    ~ footer
    .turn {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))
    ~ .pyro {
      display: block;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))
    ~ .ttt-winner {
      display: grid;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))::after {
      display: block !important;
      --_color: light-dark(oklch(0.75 0.2 20 / 1), oklch(0.7 0.15 20 / 0.75));
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))::before {
      inset: var(--_gap) 0;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(1) td:nth-child(2) i):has(
          tr:nth-child(1) td:nth-child(3) i
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(2) td:nth-child(3) i
        )::after {
      --_distance: calc(50% - 1px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(1) i
        ):has(tr:nth-child(3) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(1) i):has(
          tr:nth-child(3) td:nth-child(1) i
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(2) i
        )::after {
      --_distance: 50%;
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) i
        ):has(tr:nth-child(2) td:nth-child(3) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: 50%;
      --_to: top right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(1) i
        )::after {
      --_distance: 50%;
      --_to: top left;
    }

    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)) {
      pointer-events: none;
      margin-block-end: -0.125rem;
      /* horizontal 1 */
      /* horizontal 2 */
      /* horizontal 3 */
      /* vertical 1 */
      /* vertical 2 */
      /* vertical 3 */
      /* diagonal 1 */
      /* diagonal 2 */
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    + footer
    button
    .new-game {
      display: unset;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    + footer
    button
    .reset {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    + footer
    button:has(.new-game) {
      filter: invert(1);
      letter-spacing: 1px;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    + footer
    button:has(.new-game):hover {
      background-color: #aaa;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    ~ footer
    .player-1 {
      display: block;
      color: var(--player-2-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-1 {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-2 {
      display: block;
      color: var(--player-1-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    ~ footer
    .turn {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    ~ .pyro {
      display: block;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    ~ .ttt-winner {
      display: grid;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))::after {
      display: block !important;
      --_color: light-dark(oklch(0.75 0.2 20 / 1), oklch(0.7 0.15 20 / 0.75));
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))::before {
      inset: var(--_gap) 0;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(1) td:nth-child(2) i):has(
          tr:nth-child(1) td:nth-child(3) i
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(2) td:nth-child(3) i
        )::after {
      --_distance: calc(50% - 1px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(1) i
        ):has(tr:nth-child(3) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(1) i):has(
          tr:nth-child(3) td:nth-child(1) i
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(2) i
        )::after {
      --_distance: 50%;
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) i
        ):has(tr:nth-child(2) td:nth-child(3) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: 50%;
      --_to: top right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(1) i
        )::after {
      --_distance: 50%;
      --_to: top left;
    }

    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)) {
      pointer-events: none;
      margin-block-end: -0.125rem;
      /* horizontal 1 */
      /* horizontal 2 */
      /* horizontal 3 */
      /* vertical 1 */
      /* vertical 2 */
      /* vertical 3 */
      /* diagonal 1 */
      /* diagonal 2 */
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    + footer
    button
    .new-game {
      display: unset;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    + footer
    button
    .reset {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    + footer
    button:has(.new-game) {
      filter: invert(1);
      letter-spacing: 1px;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    + footer
    button:has(.new-game):hover {
      background-color: #aaa;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    ~ footer
    .player-1 {
      display: block;
      color: var(--player-2-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-1 {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-2 {
      display: block;
      color: var(--player-1-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    ~ footer
    .turn {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    ~ .pyro {
      display: block;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
    ~ .ttt-winner {
      display: grid;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))::after {
      display: block !important;
      --_color: light-dark(oklch(0.75 0.2 20 / 1), oklch(0.7 0.15 20 / 0.75));
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))::before {
      inset: var(--_gap) 0;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(1) td:nth-child(2) i):has(
          tr:nth-child(1) td:nth-child(3) i
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(2) td:nth-child(3) i
        )::after {
      --_distance: calc(50% - 1px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(1) i
        ):has(tr:nth-child(3) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(1) i):has(
          tr:nth-child(3) td:nth-child(1) i
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(2) i
        )::after {
      --_distance: 50%;
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) i
        ):has(tr:nth-child(2) td:nth-child(3) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: 50%;
      --_to: top right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(1) i
        )::after {
      --_distance: 50%;
      --_to: top left;
    }

    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)) {
      pointer-events: none;
      margin-block-end: -0.125rem;
      /* horizontal 1 */
      /* horizontal 2 */
      /* horizontal 3 */
      /* vertical 1 */
      /* vertical 2 */
      /* vertical 3 */
      /* diagonal 1 */
      /* diagonal 2 */
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
    + footer
    button
    .new-game {
      display: unset;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
    + footer
    button
    .reset {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
    + footer
    button:has(.new-game) {
      filter: invert(1);
      letter-spacing: 1px;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
    + footer
    button:has(.new-game):hover {
      background-color: #aaa;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
    ~ footer
    .player-1 {
      display: block;
      color: var(--player-2-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-1 {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)).player-2s-turn
    ~ footer
    span.player-2 {
      display: block;
      color: var(--player-1-clr);
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
    ~ footer
    .turn {
      display: none;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
    ~ .pyro {
      display: block;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
    ~ .ttt-winner {
      display: grid;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))::after {
      display: block !important;
      --_color: light-dark(oklch(0.75 0.2 20 / 1), oklch(0.7 0.15 20 / 0.75));
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))::before {
      inset: var(--_gap) 0;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(1) td:nth-child(2) i):has(
          tr:nth-child(1) td:nth-child(3) i
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(2) td:nth-child(3) i
        )::after {
      --_distance: calc(50% - 1px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(3) td:nth-child(1) i
        ):has(tr:nth-child(3) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
      --_to: bottom;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(1) i):has(
          tr:nth-child(3) td:nth-child(1) i
        )::after {
      --_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(2) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(2) i
        )::after {
      --_distance: 50%;
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) i
        ):has(tr:nth-child(2) td:nth-child(3) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
      --_to: right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(1) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(3) i
        )::after {
      --_distance: 50%;
      --_to: top right;
    }
    table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
          tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
        ):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
          tr:nth-child(1) td:nth-child(3) i
        ):has(tr:nth-child(2) td:nth-child(2) i):has(
          tr:nth-child(3) td:nth-child(1) i
        )::after {
      --_distance: 50%;
      --_to: top left;
    }

    .xo .remaining-life {
      position: absolute;
      top: 0.5ch;
      left: 0.75ch;
      z-index: 1;
    }

    .remaining-life {
      white-space: nowrap;
      display: flex;
      gap: 0.5ch;
      align-items: center;
      justify-content: center;
      background: #88888830;
      background: light-dark(#88888840, #88888825);
      border: transparent;
      border-radius: 5px;
      padding-inline: 0.7ch;
      padding-block: 0.25ch;
      line-height: 1rem;
    }

    .circle {
      width: 0.35rem;
      height: 0.35rem;
      border-radius: 50%;
      margin: 1px;
      /* Space between circles */
      display: inline-block;
      /* Aligns circles next to each other */
    }

    .outlined {
      background-color: light-dark(#888888a0, #444444a0);
      /* No fill */
      border: 1px solid #4caf50;
      /* Outline color */
      border-color: #88888880;
    }

    .filled {
      background-color: #4caf50a0;
      background-color: light-dark(#4caf50aa, #4caf5080);
      /* Fill color */
    }

    .rubberband {
      --duration: 3s;
      --repeat: 3;
      animation: rubberband var(--duration) ease-in-out var(--repeat);
      /* animation-delay: 3s; */
    }

    @keyframes rubberband {
      0% {
        transform: scaleX(1);
      }
      19.8% {
        transform: scale3d(1.125, 0.875, 1);
      }
      26.4% {
        transform: scale3d(0.875, 1.125, 1);
      }
      33% {
        transform: scale3d(1.075, 0.925, 1);
      }
      42.9% {
        transform: scale3d(0.975, 1.025, 1);
      }
      49.5% {
        transform: scale3d(1.025, 0.975, 1);
      }
      66% {
        transform: scaleX(1);
      }
    }
    @layer pyro {
      body {
        margin: 0;
        padding: 0;
      }

      .pyro > .before,
      .pyro > .after {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
        0 0 #fff, 0 0 #fff, 0 0 #fff;
        -moz-animation: 1s bang ease-out infinite backwards, 1s gravity
        ease-in infinite backwards, 5s position linear infinite backwards;
        -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity
        ease-in infinite backwards, 5s position linear infinite backwards;
        -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in
        infinite backwards, 5s position linear infinite backwards;
        -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in
        infinite backwards, 5s position linear infinite backwards;
        animation: 1s bang ease-out infinite backwards, 1s gravity ease-in
        infinite backwards, 5s position linear infinite backwards;
      }

      .pyro > .after {
        -moz-animation-delay: 1.25s, 1.25s, 1.25s;
        -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
        -o-animation-delay: 1.25s, 1.25s, 1.25s;
        -ms-animation-delay: 1.25s, 1.25s, 1.25s;
        animation-delay: 1.25s, 1.25s, 1.25s;
        -moz-animation-duration: 1.25s, 1.25s, 6.25s;
        -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
        -o-animation-duration: 1.25s, 1.25s, 6.25s;
        -ms-animation-duration: 1.25s, 1.25s, 6.25s;
        animation-duration: 1.25s, 1.25s, 6.25s;
      }

      @-webkit-keyframes bang {
        to {
          box-shadow: -62px -219.6666666667px blue, 89px 73.3333333333px
          #11ff00, -171px 3.3333333333px #99ff00, -232px -25.6666666667px
          #ff00ae, 73px -345.6666666667px #0091ff, 59px -278.6666666667px
          #ddff00, 142px -395.6666666667px #00ff9d, 113px -236.6666666667px
          #002fff, -94px -392.6666666667px #00ff2f, -86px -132.6666666667px
          #006fff, -14px -3.6666666667px #ff0080, -108px -139.6666666667px
          yellow, 247px -256.6666666667px #00ff2f, 199px -191.6666666667px
          #bf00ff, -6px 16.3333333333px #f700ff, -169px -183.6666666667px
          #00ffc8, -188px -152.6666666667px #1eff00, 62px -332.6666666667px
          #1500ff, 38px -369.6666666667px #0022ff, -155px -5.6666666667px
          #ff0077, -45px -242.6666666667px #00ff1e, 159px -203.6666666667px
          #0011ff, -117px -210.6666666667px #ff4000, -12px -292.6666666667px
          #ff0015, -92px 44.3333333333px #ffbf00, 240px -295.6666666667px
          #00d0ff, 138px -382.6666666667px #c8ff00, 172px -178.6666666667px
          #ff0048, 143px -343.6666666667px #ffae00, -19px 27.3333333333px
          #ff00d0, 189px 45.3333333333px #eeff00, 151px -387.6666666667px
          #d500ff, 162px -67.6666666667px #00ffa2, -34px -360.6666666667px
          #ffe600, 179px -411.6666666667px #0066ff, 125px -123.6666666667px
          #ccff00, -111px 54.3333333333px #00aeff, -195px -16.6666666667px
          #2200ff, 118px 34.3333333333px #ff003c, -120px -303.6666666667px
          #0900ff, -62px -399.6666666667px #33ff00, -84px -396.6666666667px
          #ff004d, -204px 33.3333333333px #00ff55, -58px -248.6666666667px
          #eaff00, 19px -8.6666666667px #ff4800, -111px -266.6666666667px
          #3cff00, -132px -221.6666666667px #0044ff, 181px -35.6666666667px
          #b700ff, -229px -47.6666666667px #00ffc4, -174px -70.6666666667px
          #c4ff00, 146px -139.6666666667px #4000ff;
        }
      }
      @-moz-keyframes bang {
        to {
          box-shadow: -62px -219.6666666667px blue, 89px 73.3333333333px
          #11ff00, -171px 3.3333333333px #99ff00, -232px -25.6666666667px
          #ff00ae, 73px -345.6666666667px #0091ff, 59px -278.6666666667px
          #ddff00, 142px -395.6666666667px #00ff9d, 113px -236.6666666667px
          #002fff, -94px -392.6666666667px #00ff2f, -86px -132.6666666667px
          #006fff, -14px -3.6666666667px #ff0080, -108px -139.6666666667px
          yellow, 247px -256.6666666667px #00ff2f, 199px -191.6666666667px
          #bf00ff, -6px 16.3333333333px #f700ff, -169px -183.6666666667px
          #00ffc8, -188px -152.6666666667px #1eff00, 62px -332.6666666667px
          #1500ff, 38px -369.6666666667px #0022ff, -155px -5.6666666667px
          #ff0077, -45px -242.6666666667px #00ff1e, 159px -203.6666666667px
          #0011ff, -117px -210.6666666667px #ff4000, -12px -292.6666666667px
          #ff0015, -92px 44.3333333333px #ffbf00, 240px -295.6666666667px
          #00d0ff, 138px -382.6666666667px #c8ff00, 172px -178.6666666667px
          #ff0048, 143px -343.6666666667px #ffae00, -19px 27.3333333333px
          #ff00d0, 189px 45.3333333333px #eeff00, 151px -387.6666666667px
          #d500ff, 162px -67.6666666667px #00ffa2, -34px -360.6666666667px
          #ffe600, 179px -411.6666666667px #0066ff, 125px -123.6666666667px
          #ccff00, -111px 54.3333333333px #00aeff, -195px -16.6666666667px
          #2200ff, 118px 34.3333333333px #ff003c, -120px -303.6666666667px
          #0900ff, -62px -399.6666666667px #33ff00, -84px -396.6666666667px
          #ff004d, -204px 33.3333333333px #00ff55, -58px -248.6666666667px
          #eaff00, 19px -8.6666666667px #ff4800, -111px -266.6666666667px
          #3cff00, -132px -221.6666666667px #0044ff, 181px -35.6666666667px
          #b700ff, -229px -47.6666666667px #00ffc4, -174px -70.6666666667px
          #c4ff00, 146px -139.6666666667px #4000ff;
        }
      }
      @-o-keyframes bang {
        to {
          box-shadow: -62px -219.6666666667px blue, 89px 73.3333333333px
          #11ff00, -171px 3.3333333333px #99ff00, -232px -25.6666666667px
          #ff00ae, 73px -345.6666666667px #0091ff, 59px -278.6666666667px
          #ddff00, 142px -395.6666666667px #00ff9d, 113px -236.6666666667px
          #002fff, -94px -392.6666666667px #00ff2f, -86px -132.6666666667px
          #006fff, -14px -3.6666666667px #ff0080, -108px -139.6666666667px
          yellow, 247px -256.6666666667px #00ff2f, 199px -191.6666666667px
          #bf00ff, -6px 16.3333333333px #f700ff, -169px -183.6666666667px
          #00ffc8, -188px -152.6666666667px #1eff00, 62px -332.6666666667px
          #1500ff, 38px -369.6666666667px #0022ff, -155px -5.6666666667px
          #ff0077, -45px -242.6666666667px #00ff1e, 159px -203.6666666667px
          #0011ff, -117px -210.6666666667px #ff4000, -12px -292.6666666667px
          #ff0015, -92px 44.3333333333px #ffbf00, 240px -295.6666666667px
          #00d0ff, 138px -382.6666666667px #c8ff00, 172px -178.6666666667px
          #ff0048, 143px -343.6666666667px #ffae00, -19px 27.3333333333px
          #ff00d0, 189px 45.3333333333px #eeff00, 151px -387.6666666667px
          #d500ff, 162px -67.6666666667px #00ffa2, -34px -360.6666666667px
          #ffe600, 179px -411.6666666667px #0066ff, 125px -123.6666666667px
          #ccff00, -111px 54.3333333333px #00aeff, -195px -16.6666666667px
          #2200ff, 118px 34.3333333333px #ff003c, -120px -303.6666666667px
          #0900ff, -62px -399.6666666667px #33ff00, -84px -396.6666666667px
          #ff004d, -204px 33.3333333333px #00ff55, -58px -248.6666666667px
          #eaff00, 19px -8.6666666667px #ff4800, -111px -266.6666666667px
          #3cff00, -132px -221.6666666667px #0044ff, 181px -35.6666666667px
          #b700ff, -229px -47.6666666667px #00ffc4, -174px -70.6666666667px
          #c4ff00, 146px -139.6666666667px #4000ff;
        }
      }
      @-ms-keyframes bang {
        to {
          box-shadow: -62px -219.6666666667px blue, 89px 73.3333333333px
          #11ff00, -171px 3.3333333333px #99ff00, -232px -25.6666666667px
          #ff00ae, 73px -345.6666666667px #0091ff, 59px -278.6666666667px
          #ddff00, 142px -395.6666666667px #00ff9d, 113px -236.6666666667px
          #002fff, -94px -392.6666666667px #00ff2f, -86px -132.6666666667px
          #006fff, -14px -3.6666666667px #ff0080, -108px -139.6666666667px
          yellow, 247px -256.6666666667px #00ff2f, 199px -191.6666666667px
          #bf00ff, -6px 16.3333333333px #f700ff, -169px -183.6666666667px
          #00ffc8, -188px -152.6666666667px #1eff00, 62px -332.6666666667px
          #1500ff, 38px -369.6666666667px #0022ff, -155px -5.6666666667px
          #ff0077, -45px -242.6666666667px #00ff1e, 159px -203.6666666667px
          #0011ff, -117px -210.6666666667px #ff4000, -12px -292.6666666667px
          #ff0015, -92px 44.3333333333px #ffbf00, 240px -295.6666666667px
          #00d0ff, 138px -382.6666666667px #c8ff00, 172px -178.6666666667px
          #ff0048, 143px -343.6666666667px #ffae00, -19px 27.3333333333px
          #ff00d0, 189px 45.3333333333px #eeff00, 151px -387.6666666667px
          #d500ff, 162px -67.6666666667px #00ffa2, -34px -360.6666666667px
          #ffe600, 179px -411.6666666667px #0066ff, 125px -123.6666666667px
          #ccff00, -111px 54.3333333333px #00aeff, -195px -16.6666666667px
          #2200ff, 118px 34.3333333333px #ff003c, -120px -303.6666666667px
          #0900ff, -62px -399.6666666667px #33ff00, -84px -396.6666666667px
          #ff004d, -204px 33.3333333333px #00ff55, -58px -248.6666666667px
          #eaff00, 19px -8.6666666667px #ff4800, -111px -266.6666666667px
          #3cff00, -132px -221.6666666667px #0044ff, 181px -35.6666666667px
          #b700ff, -229px -47.6666666667px #00ffc4, -174px -70.6666666667px
          #c4ff00, 146px -139.6666666667px #4000ff;
        }
      }
      @keyframes bang {
        to {
          box-shadow: -62px -219.6666666667px blue, 89px 73.3333333333px
          #11ff00, -171px 3.3333333333px #99ff00, -232px -25.6666666667px
          #ff00ae, 73px -345.6666666667px #0091ff, 59px -278.6666666667px
          #ddff00, 142px -395.6666666667px #00ff9d, 113px -236.6666666667px
          #002fff, -94px -392.6666666667px #00ff2f, -86px -132.6666666667px
          #006fff, -14px -3.6666666667px #ff0080, -108px -139.6666666667px
          yellow, 247px -256.6666666667px #00ff2f, 199px -191.6666666667px
          #bf00ff, -6px 16.3333333333px #f700ff, -169px -183.6666666667px
          #00ffc8, -188px -152.6666666667px #1eff00, 62px -332.6666666667px
          #1500ff, 38px -369.6666666667px #0022ff, -155px -5.6666666667px
          #ff0077, -45px -242.6666666667px #00ff1e, 159px -203.6666666667px
          #0011ff, -117px -210.6666666667px #ff4000, -12px -292.6666666667px
          #ff0015, -92px 44.3333333333px #ffbf00, 240px -295.6666666667px
          #00d0ff, 138px -382.6666666667px #c8ff00, 172px -178.6666666667px
          #ff0048, 143px -343.6666666667px #ffae00, -19px 27.3333333333px
          #ff00d0, 189px 45.3333333333px #eeff00, 151px -387.6666666667px
          #d500ff, 162px -67.6666666667px #00ffa2, -34px -360.6666666667px
          #ffe600, 179px -411.6666666667px #0066ff, 125px -123.6666666667px
          #ccff00, -111px 54.3333333333px #00aeff, -195px -16.6666666667px
          #2200ff, 118px 34.3333333333px #ff003c, -120px -303.6666666667px
          #0900ff, -62px -399.6666666667px #33ff00, -84px -396.6666666667px
          #ff004d, -204px 33.3333333333px #00ff55, -58px -248.6666666667px
          #eaff00, 19px -8.6666666667px #ff4800, -111px -266.6666666667px
          #3cff00, -132px -221.6666666667px #0044ff, 181px -35.6666666667px
          #b700ff, -229px -47.6666666667px #00ffc4, -174px -70.6666666667px
          #c4ff00, 146px -139.6666666667px #4000ff;
        }
      }
      @-webkit-keyframes gravity {
        to {
          transform: translateY(200px);
          -moz-transform: translateY(200px);
          -webkit-transform: translateY(200px);
          -o-transform: translateY(200px);
          -ms-transform: translateY(200px);
          opacity: 0;
        }
      }
      @-moz-keyframes gravity {
        to {
          transform: translateY(200px);
          -moz-transform: translateY(200px);
          -webkit-transform: translateY(200px);
          -o-transform: translateY(200px);
          -ms-transform: translateY(200px);
          opacity: 0;
        }
      }
      @-o-keyframes gravity {
        to {
          transform: translateY(200px);
          -moz-transform: translateY(200px);
          -webkit-transform: translateY(200px);
          -o-transform: translateY(200px);
          -ms-transform: translateY(200px);
          opacity: 0;
        }
      }
      @-ms-keyframes gravity {
        to {
          transform: translateY(200px);
          -moz-transform: translateY(200px);
          -webkit-transform: translateY(200px);
          -o-transform: translateY(200px);
          -ms-transform: translateY(200px);
          opacity: 0;
        }
      }
      @keyframes gravity {
        to {
          transform: translateY(200px);
          -moz-transform: translateY(200px);
          -webkit-transform: translateY(200px);
          -o-transform: translateY(200px);
          -ms-transform: translateY(200px);
          opacity: 0;
        }
      }
      @-webkit-keyframes position {
        0%,
        19.9% {
          margin-top: 10%;
          margin-left: 40%;
        }
        20%,
        39.9% {
          margin-top: 40%;
          margin-left: 30%;
        }
        40%,
        59.9% {
          margin-top: 20%;
          margin-left: 70%;
        }
        60%,
        79.9% {
          margin-top: 30%;
          margin-left: 20%;
        }
        80%,
        99.9% {
          margin-top: 30%;
          margin-left: 80%;
        }
      }
      @-moz-keyframes position {
        0%,
        19.9% {
          margin-top: 10%;
          margin-left: 40%;
        }
        20%,
        39.9% {
          margin-top: 40%;
          margin-left: 30%;
        }
        40%,
        59.9% {
          margin-top: 20%;
          margin-left: 70%;
        }
        60%,
        79.9% {
          margin-top: 30%;
          margin-left: 20%;
        }
        80%,
        99.9% {
          margin-top: 30%;
          margin-left: 80%;
        }
      }
      @-o-keyframes position {
        0%,
        19.9% {
          margin-top: 10%;
          margin-left: 40%;
        }
        20%,
        39.9% {
          margin-top: 40%;
          margin-left: 30%;
        }
        40%,
        59.9% {
          margin-top: 20%;
          margin-left: 70%;
        }
        60%,
        79.9% {
          margin-top: 30%;
          margin-left: 20%;
        }
        80%,
        99.9% {
          margin-top: 30%;
          margin-left: 80%;
        }
      }
      @-ms-keyframes position {
        0%,
        19.9% {
          margin-top: 10%;
          margin-left: 40%;
        }
        20%,
        39.9% {
          margin-top: 40%;
          margin-left: 30%;
        }
        40%,
        59.9% {
          margin-top: 20%;
          margin-left: 70%;
        }
        60%,
        79.9% {
          margin-top: 30%;
          margin-left: 20%;
        }
        80%,
        99.9% {
          margin-top: 30%;
          margin-left: 80%;
        }
      }
      @keyframes position {
        0%,
        19.9% {
          margin-top: 10%;
          margin-left: 40%;
        }
        20%,
        39.9% {
          margin-top: 40%;
          margin-left: 30%;
        }
        40%,
        59.9% {
          margin-top: 20%;
          margin-left: 70%;
        }
        60%,
        79.9% {
          margin-top: 30%;
          margin-left: 20%;
        }
        80%,
        99.9% {
          margin-top: 30%;
          margin-left: 80%;
        }
      }
    }
    .pyro {
      z-index: 3;
      inset: 0;
      width: 100vw;
      margin: auto;
      position: fixed;
      display: none;
      pointer-events: none;
    }

    .ttt-winner {
      --_hue-rotation: hue-rotate(345deg);
      position: absolute;
      inset: 0;
      top: 15rem;
      margin: auto;
      margin-top: 0;
      justify-self: center;
      aspect-ratio: 1.2;
      display: grid;
      /**/
      display: none;
      /**/
      overflow: hidden;
      box-shadow: var(--shadow-6);
      z-index: 1;
      cursor: pointer;
      max-width: min(12rem, 100%);
      height: auto;
      object-fit: cover;
      /** filter: hue-rotate(200deg);
  filter: hue-rotate(345deg);
  filter: var(--_hue-rotation); /**/
      transition: opacity 0.3s var(--back-out), filter 0.3s var(--back-out);
    }
    @starting-style {
      .ttt-winner {
        opacity: 0;
      }
    }
    .ttt-winner:hover,
    .ttt-winner:focus-visible {
      /**/
      filter: grayscale(1);
      /**/
      opacity: 0.4;
      opacity: 0.75;
    }
    .ttt-winner:focus-visible {
      outline: dashed 2px currentcolor;
      outline-offset: -4px;
    }
    .ttt-winner.not-shown {
      opacity: 0;
      pointer-events: none;
    }

    /* Theme Picker */
    /**/
    *:has(.theme-picker) {
      position: static;
    }

    /**/
    /**/
    html:has(.theme-picker) {
      position: relative;
    }

    /**/
    .theme-picker {
      --color-picker-bg: var(--primary-vivid, #88888860);
      --color-picker-color: var(--surface-base);
      --color-picker-hover-color: var(--surface-min);
      --color-picker-shadow: var(--shadow-1);
      list-style: none;
      padding: 0;
      margin: 0;
      text-align: right;
      position: fixed;
      position: absolute;
      top: auto;
      top: 45px;
      right: 45px;
      z-index: 3;
      /* border: solid 1px; */
      display: grid;
      justify-items: end;
      align-items: center;
      gap: 0.5rem;
      min-width: 85px;
      /* Hide initially, show when JS loads */
      /* &:hover:focus-within {
    gap: 0;
    .picker-label {
      display: none;
    }
  } */
      /* Only show the next option */
      transition: top 0.3s ease-in-out, right 0.3s ease-in-out;
    }
    .theme-picker:not(:focus-within) {
      opacity: 0;
      pointer-events: none;
    }
    .theme-picker > *:not(:nth-child(2)) {
      display: none;
    }
    .theme-picker button {
      /* https://www.trysmudford.com/blog/a-good-reset/ */
      -webkit-appearance: none;
      box-shadow: none;
      cursor: pointer;
      /**/
      border: 0;
      /**/
      margin: 0;
      border-radius: 2em;
      min-height: 2.2rem;
      min-width: 2.2rem;
      display: grid;
      place-content: center;
      grid-template-columns: 1fr auto;
      align-items: center;
      justify-content: center;
      justify-items: center;
      gap: 0.5ch;
      padding: 0.5em 1ch;
      line-height: 1;
      background-color: var(--color-picker-bg);
      color: var(--color-picker-color);
      font-size: inherit;
      font-family: system-ui, serif;
      box-shadow: var(--color-picker-shadow);
      transition: padding 0.8s cubic-bezier(0.5, 0.75, 0.75, 1.25), gap 0.4s
      cubic-bezier(0.5, 0.75, 0.75, 1.25),
      margin 0.4s cubic-bezier(0.5, 0.75, 0.75, 1.25), border-radius 0.2s
      cubic-bezier(0.5, 0.75, 0.75, 1.25);
    }
    .theme-picker button:hover {
      color: var(--color-picker-hover-color);
      /**border-radius: 6px;/**/
      margin-right: -3px;
    }
    .theme-picker button:active {
      /** filter: invert(1) hue-rotate(180deg); /**/
      color: var(--color-picker-color);
      /**border-radius: 8px;/**/
      cursor: wait;
    }
    .theme-picker button .icon {
      text-align: center;
      width: 1em;
      height: 1em;
      display: grid;
      place-content: center;
      padding-inline: 0;
      padding: 0.1em;
    }
    .theme-picker button .picker-label {
      transition: all 0.3s ease-in-out;
      padding-inline: 0.25em 0.15em;
    }
    .theme-picker:not(:is(:hover, :focus-within)) button {
      gap: 0;
    }
    .theme-picker:not(:is(:hover, :focus-within)) button > *:not(.icon) {
      display: none;
    }
    @media (width < 890px) {
      .theme-picker {
        /* outline: solid 1px red; */
        top: 0.5rem;
        right: 0.5rem;
        /**/
        scale: 0.75;
        /**/
      }
    }

    .hover-slide {
      background: linear-gradient(var(--player-clr) 0 0) var(--p, 0) / var(
              --p,
              0
      )
      no-repeat;
      padding-inline: 0.07em;
      text-decoration: none;
      display: inline-block;
      width: max-content;
      transition: 0.4s, background-position 0s;
    }
    .hover-slide:hover {
      --p: 100%;
      color: light-dark(#000, #fff) !important;
    }

    .built-by {
      font-family: 'Georgia';
      text-decoration: none;
      font-size: 1.05em;
      color: currentcolor;
      white-space: nowrap;
    }

    .info-game {
      font-size: 0.75em;
      text-align: center;
      color: #888;
      display: flex;
      gap: 0.25rem;
      flex-wrap: wrap;
      margin-block: 0.25rem;
    }

    .marked {
      opacity: 0;
      transition: opacity 0.6s var(--back-out);
    }

    .game-status {
      max-height: 1rem;
    }

    .player-2,
    .player-1 {
      font-family: system-ui;
    }
  </style>
</head>
<body>
<table class="xo shiny-edges">
  <tr>
    <td tabindex="0">&nbsp;</td>
    <td tabindex="0"></td>
    <td tabindex="0"></td>
  </tr>
  <tr>
    <td tabindex="0">&nbsp;</td>
    <td tabindex="0"></td>
    <td tabindex="0"></td>
  </tr>
  <tr>
    <td tabindex="0">&nbsp;</td>
    <td tabindex="0"></td>
    <td tabindex="0"></td>
  </tr>
</table>

<footer>
  <div class="game-status">
    <div class="turn">
      <span class="player-1"><b>⨯</b> </span>
      <span class="player-2"><i>⭘</i> </span>
    </div>
  </div>

  <button class="reset-btn">
    <span class="reset">重新开始</span>
    <span class="new-game">新游戏</span>
  </button>
</footer>

<div class="pyro">
  <div class="before"></div>
  <div class="after"></div>
</div>
<script>
  const grid = document.querySelector('.xo');
  document.addEventListener('mousemove', (e) => {
    grid.style.setProperty('--x', e.x + 'px');
    grid.style.setProperty('--y', e.y + 'px');
  });

  class LimitedArray {
    constructor(maxLength) {
      this.maxLength = maxLength;
      this.items = [];
    }

    add(content, row, column) {
      // remove item
      if (this.items.length >= this.maxLength) {
        const removedItem = this.items.shift();
        // console.log(removedItem.row, removedItem.column, "emptied");
        this.disappear(removedItem.row, removedItem.column);
      }

      // .remaining-life
      // fade out items (mark for removal)

      let item;

      if (this.items.length === 1) {
        item = this.items.at(0);
        if (item) this.fadeOut3(item.row, item.column);
      }
      if (this.items.length === 2) {
        item = this.items.at(1);
        if (item) this.fadeOut3(item.row, item.column);
      }

      if (this.items.length === 3) {
        item = this.items.at(0);
        if (item) this.fadeOut2(item.row, item.column);
        item = this.items.at(2);
        if (item) this.fadeOut3(item.row, item.column);
      }
      if (this.items.length === 4) {
        item = this.items.at(1);
        if (item) this.fadeOut2(item.row, item.column);
        item = this.items.at(3);
        if (item) this.fadeOut3(item.row, item.column);
      }

      if (this.items.length === 5) {
        item = this.items.at(0);
        if (item) this.fadeOut(item.row, item.column);
        item = this.items.at(2);
        if (item) this.fadeOut2(item.row, item.column);
        item = this.items.at(4);
        if (item) this.fadeOut3(item.row, item.column);
      }
      if (this.items.length === 6) {
        item = this.items.at(1);
        if (item) this.fadeOut(item.row, item.column);
        item = this.items.at(3);
        if (item) this.fadeOut2(item.row, item.column);
        item = this.items.at(5);
        if (item) this.fadeOut3(item.row, item.column);
      }

      // add item
      this.items.push({ content, row, column });
      // console.log(this.items);
    }

    getItems() {
      return this.items;
    }
    size() {
      return this.items.length;
    }
    reset() {
      this.items = [];
    }

    // disappear(row, column) {
    // 	const el = document.querySelector(`table tr:nth-child(${row}) td:nth-child(${column})`);
    // 	el.innerHTML = "&nbsp;";
    // }
    disappear(row, column) {
      const el = document.querySelector(
              `table tr:nth-child(${row}) td:nth-child(${column})`
      );
      const content = el.querySelector(':is(b,i)');
      content.classList.add('marked');
      setTimeout(() => {
        // Set a timeout to allow the CSS transition to take effect
        // Wait for the opacity animation to finish
        content.addEventListener(
                'transitionend',
                () => {
                  // Set the innerHTML to a space after the animation is complete
                  el.innerHTML = '&nbsp;';
                },
                { once: true }
        ); // listener is removed after it fires 1
      }, 0); // Use a timeout to allow the class addition to take effect
    }

    fadeOut(row, column) {
      const el = document.querySelector(
              `table tr:nth-child(${row}) td:nth-child(${column}) > :is(b,i)`
      );
      el.classList.add('fade-out');
      // el.classList.remove("fade-out-2");
      el.closest('td').querySelector('.remaining-life').innerHTML = `
      <div class="circle outlined"></div>
      <div class="circle outlined"></div>
      <div class="circle outlined"></div>`;
    }
    fadeOut2(row, column) {
      const el = document.querySelector(
              `table tr:nth-child(${row}) td:nth-child(${column}) > :is(b,i)`
      );
      // el.classList.add("fade-out-2");
      el.closest('td').querySelector('.remaining-life').innerHTML = `
      <div class="circle filled"></div>
      <div class="circle outlined"></div>
      <div class="circle outlined"></div>`;
    }
    fadeOut3(row, column) {
      const el = document.querySelector(
              `table tr:nth-child(${row}) td:nth-child(${column}) > :is(b,i)`
      );
      // el.classList.add("fade-out-2");
      el.closest('td').querySelector('.remaining-life').innerHTML = `
      <div class="circle filled"></div>
      <div class="circle filled"></div>
      <div class="circle outlined"></div>`;
    }
  }

  const moves = new LimitedArray(6);
  const table = document.querySelector('table.xo');

  document.querySelectorAll('.xo td').forEach((item, index) => {
    item.addEventListener('click', function (e) {
      const el = e.target.closest('td');
      if (el.querySelector(':is(b,i)')) return;

      let player2sTurn = table.classList.contains('player-2s-turn');
      let content = player2sTurn ? '<i>⭘</i>' : '<b>⨯</b>';
      content += `<div class="remaining-life">
      <div class="circle filled"></div>
      <div class="circle filled"></div>
      <div class="circle filled"></div>
    </div>`;
      table.classList.toggle('player-2s-turn');

      const row = Math.floor(index / 3) + 1;
      const column = (index % 3) + 1;
      moves.add(content, row, column);
      // console.log(row, column, "filled");
      el.innerHTML = content;
    });

    // keyboard
    item.addEventListener('keydown', function (e) {
      const el = e.target.closest('td');

      // Handle click actions for space and enter keys
      if (e.key === ' ' || e.key === 'Enter') {
        // if (el.querySelector(":is(b,i)")) {
        //   return;
        // }
        el.click();
        e.preventDefault();
        return;
      }

      // Handle Keyboard Navigation
      const actieEl = document.activeElement;
      const row = actieEl.parentElement.rowIndex + 1;
      const col = actieEl.cellIndex + 1;

      // Function to get the next cell based on row and column adjustments
      const getNextCell = (rowAdjustment, colAdjustment) => {
        const newRow = ((row + rowAdjustment - 1 + 3) % 3) + 1; // Wrap around rows
        const newCol = ((col + colAdjustment - 1 + 3) % 3) + 1; // Wrap around columns
        return document.querySelector(
                `.xo tr:nth-child(${newRow}) td:nth-child(${newCol})`
        );
      };

      // Directional mapping for navigation keys
      const directionMap = {
        ArrowDown: [1, 0],
        ArrowUp: [-1, 0],
        ArrowLeft: [0, -1],
        ArrowRight: [0, 1],
        w: [-1, 0],
        s: [1, 0],
        a: [0, -1],
        d: [0, 1],
      };

      const adjustment = directionMap[e.key];
      if (adjustment) {
        getNextCell(adjustment[0], adjustment[1]).focus();
        e.preventDefault();
      }
    });

    // mousedown
    // item.addEventListener("mousedown", function(e) {
    // 	const el = e.target.closest("td");
    // 	el.click();
    // });
  });

  // buttons
  document.querySelector('.reset-btn').addEventListener('click', (e) => {
    document.querySelectorAll('.xo td').forEach((item) => {
      item.innerHTML = '&nbsp;';
      table.classList.remove('player-2s-turn');
      moves.reset();
      document.querySelector('.not-shown')?.classList.remove('not-shown');
    });
  });

  // display winner gif
  document
          .querySelector('.ttt-winner')
          ?.addEventListener('click', function (e) {
            const el = e.target.closest('img');
            el.classList.add('not-shown');
            document.querySelector('.pyro').style.opacity = 0;
          });
  document
          .querySelector('.ttt-winner')
          ?.addEventListener('keydown', function (e) {
            const el = e.target.closest('img');
            if (e.key === ' ' || e.key === 'Enter') {
              el.click();
              e.preventDefault();
              return;
            }
          });

  // init theme picker
  const initialTheme = localStorage.getItem('theme') ?? 'dark';
  if (initialTheme) {
    const el = document.documentElement;
    // const currentScheme = el.style.colorScheme || "light";

    if (initialTheme === 'light dark') {
      el.style.colorScheme = 'light dark';
    } else if (initialTheme === 'light') {
      el.style.colorScheme = 'light';
    } else {
      el.style.colorScheme = 'dark';
    }
  }
  // theme picker events
  const themePicker = document.querySelector('.theme-picker');
  themePicker.style.opacity = 'unset';
  themePicker.style.pointerEvents = 'unset';
  themePicker.addEventListener('click', function (event) {
    const clickedButton = event.target.closest('button');

    if (clickedButton) {
      const buttons = Array.from(themePicker.querySelectorAll('button'));
      const clickedIndex = buttons.indexOf(clickedButton);

      const reorderedButtons = buttons
              .slice(clickedIndex)
              .concat(buttons.slice(0, clickedIndex));

      themePicker.innerHTML = ''; // Clear the existing list

      reorderedButtons.forEach((button) => {
        themePicker
                .appendChild(document.createElement('li'))
                .appendChild(button);
      });

      // Focus on the next option
      let nextOption = themePicker.querySelector(
              '& > *:nth-child(2) button'
      );
      nextOption.focus();
      // Remove that focus if a mouse was
      // (presumably) used and now it's leaving
      nextOption.addEventListener('mouseleave', function () {
        this.blur();
      });

      let theme = clickedButton.classList.contains('picker-light')
              ? 'dark'
              : 'light';
      if (clickedButton.classList.contains('picker-auto')) theme = 'auto';

      const el = document.documentElement;
      const currentScheme = el.style.colorScheme || 'light';
      // console.log(currentScheme)

      if (theme === 'auto') {
        el.style.colorScheme = 'light dark';
        // localStorage.removeItem('theme');
        localStorage.setItem('theme', 'light dark');
      } else {
        if (theme === 'light') {
          el.style.colorScheme = 'dark';
          localStorage.setItem('theme', 'dark');
        } else {
          el.style.colorScheme = 'light';
          localStorage.setItem('theme', 'light');
        }
      }
    }
  });
</script>
</body>
</html>
